<template>
  <div>
    <h1>123</h1>
    <!--插值表达式-->
    <!--语法：小胡子语法，Mustache语法-->
    <!--{{表达式}}-->
    <!--在data中定义的数据，可以直接在template中用-->
    <!--语句和表达式-->
    <!--if while for switch流程控制语句-->
    <!--表达式：有结果的式子就是表达式-->
    <h2>{{ name }} -- {{ age }}</h2>
    <h2>
      {{ hobby.likeone }}-{{ hobby.liketwo }}-{{ hobby.likethree }}-{{
        hobby.likefour
      }}
    </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "胡图图",
      age: 38,
      hobby: {
        likeone: "sing",
        liketwo: "dance",
        likethree: "rap",
        likefour: "basketball",
      },
    };
  },
};
</script>

<style lang="less">
div {
  width: 500px;
  height: 500px;
  background-color: #0f0;
  h1 {
    font-size: 20px;
  }
}
</style>